
import React from 'react';
import DownloaderForm from '../components/DownloaderForm';
import SeoHead from '../components/SeoHead';
import { useLocalization } from '../hooks/useLocalization';
import { TOOLS } from '../constants';

const HeroBackground = () => (
    <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" className="absolute top-0 left-0 w-full h-full text-gray-200/50 dark:text-gray-700/50">
            <defs>
                <pattern id="hero-pattern" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse">
                    <circle cx="4" cy="4" r="2" fill="currentColor"/>
                </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#hero-pattern)" />
        </svg>
        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-light via-light to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent"></div>
    </div>
);


const HomePage: React.FC = () => {
    const { t } = useLocalization();
    
    return (
        <>
            <SeoHead 
                title={t('home_title')}
                description={t('home_description')}
                keywords={t('home_keywords')}
            />
            <div className="relative py-12 sm:py-20 bg-light dark:bg-gray-900 overflow-hidden">
                 <HeroBackground />
                <div className="relative container mx-auto px-4 sm:px-6 lg:px-8 text-center z-10">
                    <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-dark dark:text-white leading-tight">
                        {t('home_h1')}
                    </h1>
                    <p className="mt-4 max-w-2xl mx-auto text-lg sm:text-xl text-gray-500 dark:text-gray-300">
                        {t('home_subtitle')}
                    </p>
                    <div className="mt-10">
                        <DownloaderForm toolName={t('any_video')} />
                    </div>
                </div>
            </div>

            <div className="py-16 bg-white dark:bg-gray-800">
                <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center mb-12">
                         <h2 className="text-3xl font-bold text-dark dark:text-white">{t('features_title')}</h2>
                         <p className="mt-2 text-gray-500 dark:text-gray-400">{t('features_subtitle')}</p>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        {TOOLS.map(tool => (
                             <div key={tool.id} className="p-6 bg-light dark:bg-gray-700 rounded-lg shadow-sm text-center">
                                 <h3 className="text-xl font-semibold text-primary dark:text-primary-light mb-2">{t(`tool_${tool.id}`)}</h3>
                                 <p className="text-gray-600 dark:text-gray-300">{t('feature_description', { tool: tool.name })}</p>
                             </div>
                        ))}
                    </div>
                </div>
            </div>

             <div className="py-16 bg-light dark:bg-gray-900">
                <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center mb-12">
                         <h2 className="text-3xl font-bold text-dark dark:text-white">{t('how_to_title')}</h2>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                        <div className="p-4">
                             <div className="mb-4 inline-flex items-center justify-center h-12 w-12 rounded-full bg-primary text-white font-bold text-xl">1</div>
                             <h3 className="text-xl font-semibold mb-2">{t('how_to_step1_title')}</h3>
                             <p className="text-gray-500 dark:text-gray-400">{t('how_to_step1_desc')}</p>
                        </div>
                         <div className="p-4">
                             <div className="mb-4 inline-flex items-center justify-center h-12 w-12 rounded-full bg-primary text-white font-bold text-xl">2</div>
                             <h3 className="text-xl font-semibold mb-2">{t('how_to_step2_title')}</h3>
                             <p className="text-gray-500 dark:text-gray-400">{t('how_to_step2_desc')}</p>
                        </div>
                         <div className="p-4">
                             <div className="mb-4 inline-flex items-center justify-center h-12 w-12 rounded-full bg-primary text-white font-bold text-xl">3</div>
                             <h3 className="text-xl font-semibold mb-2">{t('how_to_step3_title')}</h3>
                             <p className="text-gray-500 dark:text-gray-400">{t('how_to_step3_desc')}</p>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default HomePage;